/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Colors } from 'react-native/Libraries/NewAppScreen';
import Icon from 'react-native-vector-icons/MaterialIcons';

const Tab = createBottomTabNavigator();

const getTabIcon = (route: string, color: string, size: number) => {
  let iconName;
  switch (route) {
    case '首页':
      iconName = 'home';
      break;
    case '探索':
      iconName = 'explore';
      break;
    case '无形管家':
      iconName = 'assistant';
      break;
    case '更多':
      iconName = 'more-horiz';
      break;
    default:
      iconName = 'help';
  }
  return <Icon name={iconName} size={size} color={color} />;
};

// 首页组件
const HomeScreen = () => (
  <View style={styles.screenContainer}>
    <Text>首页</Text>
  </View>
);

// 探索组件
const ExploreScreen = () => (
  <View style={styles.screenContainer}>
    <Text>探索</Text>
  </View>
);

// 无形管家组件
const AssistantScreen = () => (
  <View style={styles.screenContainer}>
    <Text>无形管家</Text>
  </View>
);

// 更多组件
const MoreScreen = () => (
  <View style={styles.screenContainer}>
    <Text>更多</Text>
  </View>
);

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    flex: 1,
  };

  return (
    <NavigationContainer>
      <SafeAreaView style={backgroundStyle}>
        <StatusBar
          barStyle={isDarkMode ? 'light-content' : 'dark-content'}
          backgroundColor={backgroundStyle.backgroundColor}
        />
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({color, size}) => getTabIcon(route.name, color, size),
            tabBarActiveTintColor: '#007AFF',
            tabBarInactiveTintColor: 'gray',
          })}>
          <Tab.Screen name="首页" component={HomeScreen} />
          <Tab.Screen name="探索" component={ExploreScreen} />
          <Tab.Screen name="无形管家" component={AssistantScreen} />
          <Tab.Screen name="更多" component={MoreScreen} />
        </Tab.Navigator>
      </SafeAreaView>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;
